import { type CrudConfig, type FormFieldConfig } from '@/components';
import type { ProColumns } from '@ant-design/pro-components';
import { Switch, Tag } from 'antd';

// 示例数据类型
export interface DemoRecord {
  id: string;
  name: string;
  email: string;
  status: 'active' | 'inactive';
  role: string;
  createTime: string;
  description?: string;
}

// 统一的页面配置对象
export const pageConfig = {
  // CRUD配置
  crudConfig: {
    endpoints: {
      list: '/demo/users',
      create: '/demo/users',
      update: '/demo/users/:id',
      delete: '/demo/users/:id',
      detail: '/demo/users/:id',
    },
    callbacks: {
      beforeCreate: async (data: any) => ({
        ...data,
        id: Math.random().toString(36).substr(2, 9),
        createTime: new Date().toLocaleString(),
      }),
      afterCreate: async (response: any) => console.log('创建成功:', response),
      beforeUpdate: async (data: any) => data,
      afterUpdate: async (response: any) => console.log('更新成功:', response),
      beforeDelete: async () => true,
      afterDelete: async (response: any, id: string) => console.log('删除成功:', id),
      onError: (error: any, operation: string) => console.error(`操作 ${operation} 失败:`, error),
    },
  } as CrudConfig,

  // 搜索字段配置
  searchFields: [
    {
      name: 'name',
      label: '姓名',
      type: 'input' as const,
      placeholder: '请输入姓名',
    },
    {
      name: 'email',
      label: '邮箱',
      type: 'input' as const,
      placeholder: '请输入邮箱',
    },
    {
      name: 'status',
      label: '状态',
      required: true,
      type: 'select' as const,
      options: [
        { label: '全部', value: 'all' },
        { label: '活跃', value: 'active' },
        { label: '禁用', value: 'inactive' },
      ],
    },
    {
      name: 'role',
      label: '角色',
      type: 'select' as const,
      visible: (values: Record<string, any>) => values.status === 'active',
      dependencies: ['status'],
      options: [
        { label: '全部', value: '' },
        { label: '管理员', value: 'admin' },
        { label: '普通用户', value: 'user' },
        { label: '访客', value: 'guest' },
      ],
    },
    {
      name: 'createTime',
      label: '创建时间',
      type: 'dateRange' as const,
    },
  ],

  // 表格列配置
  columns: [
    {
      title: 'ID',
      dataIndex: 'id',
      width: 80,
      copyable: true,
      fixed: 'left',
    },
    {
      title: '姓名',
      dataIndex: 'name',
      width: 120,
      ellipsis: true,
      render: (text: string) => <span style={{ fontWeight: 500, color: '#1890ff' }}>{text}</span>,
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      width: 200,
      ellipsis: true,
      copyable: true,
    },
    {
      title: '角色',
      dataIndex: 'role',
      width: 100,
      render: (text: string) => {
        const colorMap = {
          admin: 'red',
          user: 'blue',
          guest: 'green',
        };
        return <Tag color={colorMap[text as keyof typeof colorMap]}>{text}</Tag>;
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 100,
      render: (_: any, record: DemoRecord) => (
        <Switch
          checked={record.status === 'active'}
          checkedChildren="活跃"
          unCheckedChildren="禁用"
          size="small"
          onChange={(checked: boolean) => {
            console.log('状态切换:', record.id, checked ? 'active' : 'inactive');
          }}
        />
      ),
    },
    {
      title: '描述',
      dataIndex: 'description',
      width: 200,
      ellipsis: true,
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      width: 160,
      valueType: 'dateTime',
      sorter: true,
    },
  ] as ProColumns<DemoRecord>[],

  // 表单字段配置
  formFields: [
    {
      name: 'name',
      label: '姓名',
      type: 'input' as const,
      placeholder: '请输入姓名',
      rules: [{ required: true, message: '请输入姓名' }],
    },
    {
      name: 'email',
      label: '邮箱',
      type: 'input' as const,
      placeholder: '请输入邮箱',
      rules: [
        { required: true, message: '请输入邮箱' },
        { type: 'email', message: '请输入正确的邮箱格式' },
      ],
    },
    {
      name: 'status',
      label: '状态',
      type: 'select' as const,
      options: [
        { label: '活跃', value: 'active' },
        { label: '禁用', value: 'inactive' },
      ],
      rules: [{ required: true, message: '请选择状态' }],
    },
    {
      name: 'role',
      label: '角色',
      type: 'select' as const,
      options: [
        { label: '管理员', value: 'admin' },
        { label: '普通用户', value: 'user' },
        { label: '访客', value: 'guest' },
      ],
      rules: [{ required: true, message: '请选择角色' }],
      visible: (values: Record<string, any>) => values.status !== 'inactive',
      dependencies: ['status'],
    },
    {
      name: 'gender',
      label: '性别',
      type: 'select' as const,
      options: [
        { label: '男', value: 'male' },
        { label: '女', value: 'female' },
        { label: '其他', value: 'other' },
      ],
      visible: (values: Record<string, any>) => values.status === 'active',
      dependencies: ['status', 'role'],
    },
    {
      name: 'department',
      label: '部门',
      type: 'select' as const,
      dynamicOptions: (values: Record<string, any>) => {
        if (values.role === 'admin') {
          return [
            { label: '管理部', value: 'management' },
            { label: '技术部', value: 'tech' },
            { label: '财务部', value: 'finance' },
          ];
        } else if (values.role === 'user') {
          return [
            { label: '技术部', value: 'tech' },
            { label: '市场部', value: 'marketing' },
            { label: '客服部', value: 'service' },
          ];
        } else {
          return [{ label: '访客区', value: 'guest' }];
        }
      },
      dependencies: ['role'],
      visible: (values: Record<string, any>) => values.role && values.status === 'active',
    },
    {
      name: 'phone',
      label: '联系电话',
      type: 'input' as const,
      placeholder: '请输入联系电话',
      dependencies: ['role'],
    },
    {
      name: 'description',
      label: '描述',
      type: 'textarea' as const,
      placeholder: '请输入描述信息',
      span: 24,
      dependencies: ['status'],
    },
    {
      name: 'skills',
      label: '技能列表',
      type: 'editTable' as const,
      span: 24,
      editTableConfig: {
        columns: [
          {
            title: '技能名称',
            dataIndex: 'skillName',
            type: 'input' as const,
            width: 200,
            required: true,
          },
          {
            title: '熟练程度',
            dataIndex: 'level',
            type: 'select' as const,
            width: 150,
            options: [
              { label: '初级', value: 'beginner' },
              { label: '中级', value: 'intermediate' },
              { label: '高级', value: 'advanced' },
              { label: '专家', value: 'expert' },
            ],
            required: true,
          },
          {
            title: '工作年限',
            dataIndex: 'years',
            type: 'number' as const,
            width: 120,
          },
          {
            title: '获得时间',
            dataIndex: 'acquiredDate',
            type: 'date' as const,
            width: 150,
          },
        ],
        rowKey: 'id',
        maxRows: 10,
        minRows: 1,
        addButtonText: '添加技能',
      },
    },
  ] as FormFieldConfig[],

  // 字典枚举配置
  dictEnum: {
    // 可以在这里添加字典枚举配置
    // crcdOrgNo: DICT_CONSTANTS.DICT_ENUM_MAP.crcdOrgNo,
  },
};
